.

iT邦幫忙

2023 iThome 鐵人賽

DAY 25
1

這一篇文章主要介紹那些常用但不知該如何分類的方法XD
也算是增加我的理解這樣。

parseInt()

將輸入的字串轉成整數。

// 語法
parseInt(string, radix);

參數說明:

  • string:待轉成數字的字串。
    • 若參數不是字串,會先轉成字串再轉成數字。
    • 空格會被忽略
  • radix:解析字串使用的進制法。例如 10 進制、16 進制等等。
  • 回傳值:轉換完成的數字。回傳結果一律為十進制。
    • 若首字元無法轉換為數字,會回傳 NaN
    • 轉換中,若遇上無法被解析的字元,會停止解析,並回傳至該位置為止的轉換結果

來個練習吧!

以下問題來自 GPT

// 基本轉換
const str = "42";
const num = parseInt(str, 10);
console.log(num); // 42

// 指定進制
const str = "1010";
const number = parseInt(str, 2); // 指定用二進制讀字串
console.log(number); // 10。回傳結果一律為十進制。

// 混有文字與數字的字串
const str = "1A2B";
const num = parseInt(str, 10); // 讀到 A 就停了
const num2 = parseInt(str, 16); // 無痛轉換
const num3 = parseInt(str, 2); // 讀到 A 就停了

console.log(`${num}, ${num2}, ${num3}`); // 1, 6699, 1

parseFloat()

解析字串並回傳為十進位制的浮點數

parseFloat(string)

參數說明

  • string:要被解析的參數,必要時會先被 toString() 轉成字串再解析
  • 回傳值:解析完成的浮點數。回傳結果一律為十進制。
  • 若解析過程中遇到了 +、-、0-9、小數點、科學符號 e 以外的字元,會停止解析,並回傳已轉換的結果。
    • 若出現第二個小數點,也會停止解析並回傳已轉換結果
    • 會忽略首尾的空格
    • 若首字元無法被轉換,會回傳 NaN

來練習一下吧!以下問題來自 GPT

// 基本
const str = "3.14";
const number = parseFloat(str);
console.log(number); // 3.14

// 科學記號轉換
const str = "1.23e-4"; // 1.23 x 10^(-4)
const num = parseFloat(str);

console.log(num); // 0.000123

new Date();

創建一個 JavaScript Date 物件以指向某特定的時間點(年、月、日,甚至到毫秒)。Data 物件儲存的數值為毫秒,是基於世界標準時間(UTC)的時間。
可傳入參數來指定時間,也可不傳入參數以回傳當前時間。

// 語法
new Date();
new Date(milliseconds);
new Date(dateString);
new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]);

參數說明

  • milliseconds:整數,單位為毫秒。
    • 範圍:西元前 271821 年 4 月 20 日到西元 275760 年 9 月 13 日(±8,640,000,000,000,000 毫秒或正負一億天)。
    • 超過範圍的時間都會得到 Invalid Date。
    • 若沒給參數,會回傳當下時間(UTC +0)
  • dateString: 表示時間的字串。
    • 這個字串要能被 Date.parse() 解析(符合 IETF-compliant RFC 2822 timestamps 及 version of ISO8601 格式)。
    • 也可使用 JS 定義的通用格式 Date Time String Format:YYYY-MM-DDTHH:mm:ss.sssZ,它是 ISO 8601 的簡化,以下說明如何使用
      • YYYY:0000-9999
      • MM:月份;01(一月)-11(十二月)。預設為 01
      • DD:日期,01-31。預設為 01
      • T:時間的開頭。表示接下來是時間的描述。
      • HH:小時,00-23。24:00:00 會被解釋為隔天的起始。預設為 00
      • mm:分;00-59。預設為 00
      • ss:秒;00-59。預設為 00
      • sss:毫秒;000-999。預設為 00
      • Z:時區偏移量。若 UTC 時間為 8:00:00Z,台灣時間的表示法為 16:00:00+08:00
  • year、month、day、hour、minutes、seconds、milliseconds:表示年、月、日、時、分、秒、毫秒的整數值;數值範圍同 Date Time String Format。

Date.prototype 方法:

  • Date.now():回傳對應於當前時間的數值。由 1970-01-01 00:00:00 UTC 至當前的毫秒數。
  • Date.parse():解析字串所表示的時間。由 1970-01-01 00:00:00 UTC 至當前的毫秒數。由於瀏覽器的不同,會有不同結果,故不建議使用。
  • Date.UTC():須傳入二至七個參數(year、month、day、hour、minutes、seconds、milliseconds)。得到由 1970-01-01 00:00:00 UTC 到該指定日期的毫秒數。
// 超出 value 的限制範圍
const time = new Date(8640000000000001);
console.log(time); // Invalid Date

// 以 new Date() 創建了一個javascript Date 物件
const time = new Date();
const hours = time.getHours(); // 可以使用 date 物件的方法
console.log(time); // 2023-09-25T08:32:42.951Z
console.log(hours); // 16,拿到當地時間的小時值
// 使用 toString 會將時區轉換為當地時間
console.log(time.toString()); // Mon Sep 25 2023 16:56:36 GMT+0800 (台北標準時間)

// 以 function 形式呼叫(不用 new),會回傳當下時間的純字串(純文字)
const time = Date();
console.log(time); // Mon Sep 25 2023 14:47:38 GMT+0800 (台北標準時間)

各種建立 Date 物件的方式

const today = new Date();
const birthday = new Date("December 17, 1995 03:24:00");
const birthday = new Date("1995-12-17T03:24:00");
const birthday = new Date("1995-12-17");
const birthday = new Date("1995"); // 除了年之外皆套用預設值
const birthday = new Date(1995, 11, 17);
const birthday = new Date(1995, 11, 17, 3, 24, 0);

來練習一下吧!以下問題來自 GPT

// 取得特定日期的詳細資訊
const specificDate = new Date("2023-09-15T10:30:00");
const year = specificDate.getFullYear();
const month = specificDate.getMonth(); // 月份從0開始,所以9代表10月
const day = specificDate.getDate();
const hours = specificDate.getHours();
const minutes = specificDate.getMinutes();
const seconds = specificDate.getSeconds();

// Year: 2023, Month: 9, Day: 15
console.log(`Year: ${year}, Month: ${month + 1}, Day: ${day}`);
console.log(`Time: ${hours}:${minutes}:${seconds}`); // Time: 10:30:0

setTimeout()

設一個全域的定時器,計時結束後執行指定的函式或 code。

// 語法
setTimeout(code); // 不建議使用
setTimeout(code, delay); // 不建議使用

setTimeout(functionRef);
setTimeout(functionRef, delay);
setTimeout(functionRef, delay, param1);
setTimeout(functionRef, delay, param1, param2);
setTimeout(functionRef, delay, param1, param2, /* … ,*/ paramN);

參數說明

  • code:定時器到期後要執行的 code。有安全風險故不建議這樣使用。
  • delay:定時器執行指定功能前的等待時間,單位為毫秒。
    • 省略時,其值為 0,會在下一個事件循環時執行。
      • 若沒有其他待辦項目在佇列中等待,會在 delay 後立即執行 setTimeout
      • 若佇列中已有其他項目,會在這些項目處理完後才執行 setTimeout。故實際等待時間可能會比設定的 delay 久。
  • functionRef:定時器到期後要執行的函式
  • paramN:定時器到期後,傳給 functionRef 的參數們
  • 回傳值:會回傳一個 timeoutID。這個 ID 可以傳給 clearTimeout() 來取消定時器。每個定時器都有自己的編號。

注意:

  • setTimeout() 中的 this 指向可能會與期望的不同。
  • setTimeout() 本身是非同步(asynchronous)函式,它不會暫停其他函式的執行,所以不能使用它來使其他函式暫停,如下例。要讓一個函式完成後才觸發另個函式,需要使用 Promise。 (有坑,之後填)
// 例子來自 MDN
setTimeout(() => {
  console.log("这是第一条消息");
}, 5000);
setTimeout(() => {
  console.log("这是第二条消息");
}, 3000);
setTimeout(() => {
  console.log("这是第三条消息");
}, 1000);

// 得到的結果:
// 这是第三条消息
// 这是第二条消息
// 这是第一条消息

clearTimeout()

用來清除 setTimeout() 的方法。

// 語法
scope.clearTimeout(timeoutID)
  • timeoutID:執行 setTimeout()時得到的 ID
    • 若傳入一個錯誤的 ID,clearTimeout() 不會執行,也不會拋出任何異常的訊息。

setTimeout()clearTimeout() 來個練習吧!例子來自 GPT

// 以 setTimeout() 執行函式
function greet() {
  console.log("Hello, otter!");
};

const timer = setTimeout(greet, 1000); // 延遲後出現 Hello, otter!

// 以 clearTimeout() 中止函式
function greet() {
  console.log("Hello, otter!");
};

const timer = setTimeout(greet, 1000); 
clearTimeout(timer); // 原本的 timer 執行被中止

// 創建一個計時器序列,依次顯示數字 1 到 5,每隔 1 秒顯示一個數字。
// 寫法1:使用 promise 完成需求;易讀性較佳
const delay = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
    }, time);
  });
};

(async () => {
  console.log("Start");
  for (let i = 0; i < 5; i++) {
    console.log(i);
    await delay(1000);
  }
  console.log("End");
})();

// 寫法2:使用 callbackFn;易讀性較差
let num = 1;
const delay2 = () => {
  console.log(num);
  if (num >= 5) {
    return;
  }
  num++;
  setTimeout(delay2, 1000);
};

delay2();

setInterval()

重複呼叫某個函式或執行一段 code,每次呼叫或執行間都間隔相同的時間。

const intervalID = setInterval(function, [delay, arg1, arg2, ...]);
const intervalID = setInterval(function[, delay]);
const intervalID = setInterval(code, [delay]);

參數說明:

  • function:要重複執行的函式。第一次執行會在 delay 後開始。
  • delay:要延遲的時間,單位為毫秒。
    • 預設值為 0
  • argN:延遲結束後,要傳入的參數們
  • code:要重複執行的代碼。與 eval() 具有一樣的安全風險,故不建議使用直接傳入 code 的方式。
  • 回傳值:一個 intervalID,可以做為參數傳入 clearInterval() 來清除定時器。

注意:

  • setInterval 與 setTimeout 共享同個 ID 池,但為免混亂,建議成對使用來維護程式碼的品質。(setIntervalclearIntervalsetTimeoutclearTimeout
  • 與 setTimeout 一樣,this 的指向可能會不如預期。可用箭頭函式來解決 this 指向的問題。

clearInterval()

取消由 setInterval() 設定的定時器任務。

scope.clearInterval(intervalID)

來個練習吧!例子來自 GPT

// 簡單的每秒數字計數器,數到五時停止 timer
let num = 0;
let timer;

function count() {
  console.log(num);
  num++;
}

timer = setInterval(function () {
  if (num === 5) {
    clearInterval(timer);
  }
  count();
}, 1000);

資訊量有點太多,需要消化沉澱一下XD
再接再厲!


參考資料

  • 認識 parseInt、parseFloat 與 Number 轉換成數字的三種方法 - UnaLai - Medium,https://medium.com/unalai/%E8%AA%8D%E8%AD%98-parseint-parsefloat-%E8%88%87-number-%E8%BD%89%E6%8F%9B%E6%88%90%E6%95%B8%E5%AD%97%E7%9A%84%E4%B8%89%E7%A8%AE%E6%96%B9%E6%B3%95-276640aedb4e
  • parseInt() - JavaScript | MDN,https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/parseInt
  • parseFloat - JavaScript | MDN,https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseFloat
  • Date - JavaScript | MDN,https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date
  • setTimeout() 全局函数 - Web API 接口参考 | MDN,https://developer.mozilla.org/zh-CN/docs/Web/API/setTimeout
  • clearTimeout() - Web API 接口参考 | MDN,https://developer.mozilla.org/zh-CN/docs/Web/API/clearTimeout
  • setInterval() - Web API 接口参考 | MDN,https://developer.mozilla.org/zh-CN/docs/Web/API/setInterval
  • WindowTimers.clearInterval() - Web API 接口参考 | MDN,https://developer.mozilla.org/zh-CN/docs/Web/API/clearInterval

上一篇
D24 - JS - 基礎 - 其他 - 字串處理 - 2
下一篇
D26 - JS - 基礎 - DOM - 1 - 元素的操作
系列文
GPT 救救我!菜雞小海獺的前端成長之旅30
圖片
  直播研討會

1 則留言

0
sponge1220
iT邦新手 4 級 ‧ 2023-09-26 16:16:51

CatBoxy iT邦新手 4 級 ‧ 2023-09-26 16:30:14 檢舉

額額

我要留言

立即登入留言